<template>
  <view class="classification" @tap="activeTag = {}">
    <u-card
      v-for="item in data"
      :key="item._id"
      :title="item.typeName"
      :sub-title="item.type"
      margin="5px 0"
      padding="25"
      @tap="clearTap(item)"
    >
      <template v-slot:body>
        <view class="cardBody" v-if="item.data.length">
          <u-tag
            v-for="item1 in item.data"
            :key="item1._id"
            :text="item1.name"
            :mode="activeTag._id === item1._id ? 'dark' : 'light'"
            @tap="tagClick(item1)"
          />
        </view>
        <u-empty v-else text="暂无数据" mode="list"></u-empty>
      </template>
      <template v-slot:foot>
        <view class="cardFoot">
          <u-icon
            name="plus-circle"
            size="30"
            label="新增"
            @tap="add(item)"
          ></u-icon>
          <u-icon
            v-if="item.data.length"
            name="edit-pen"
            size="30"
            color=""
            label="编辑"
            @tap="edit(item)"
          ></u-icon>
          <u-icon
            v-if="item.data.length"
            name="trash"
            size="30"
            color=""
            label="删除"
            @tap="del(item)"
          ></u-icon>
        </view>
      </template>
    </u-card>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from "vue";

import { onPullDownRefresh } from "@dcloudio/uni-app";

const store = uni.vk.getVuexStore();

const data = computed(() => {
  const application = store.state.baseData.application;
  return application.map((item, index) => {
    return {
      _id: index,
      type: item.type,
      typeName: item.typeName,
      data: store.getters["baseData/" + item.type] || [],
    };
  });
});

const getClassification = () => {
  return store.dispatch("baseData/getClassificationData");
};

onPullDownRefresh(async () => {
  await getClassification();
  uni.stopPullDownRefresh();
});

const activeTag = ref({});
const tagClick = (row) => {
  activeTag.value = row;
};
const add = (item) => {
  vk.prompt(
    `请输入${item.typeName}分类名称`,
    `新增${item.typeName}分类`,
    "确定",
    "取消",
    (res) => {
      if (res.confirm) {
        if (!res.content) {
          return vk.toast("分类名称不能为空");
        }
        if (res.content.length > 7) {
          return vk.toast("分类名称不能超过7个字符");
        }
        uni.vk
          .callFunction({
            url: "client/classification/kh/addClassification",
            data: {
              name: res.content,
              type: item.type,
            },
          })
          .then((res) => {
            vk.toast(res.msg);
            getClassification();
          });
      }
    }
  );
};
const edit = (item) => {
  if (!activeTag.value._id || activeTag.value.type !== item.type)
    return vk.toast(`请先选择要编辑的${item.typeName}分类`);
  vk.prompt(
    `请输入${item.typeName}分类名称`,
    `编辑${item.typeName}分类`,
    "确定",
    "取消",
    (res) => {
      if (res.confirm) {
        if (!res.content) {
          return vk.toast("分类名称不能为空");
        }
        if (res.content.length > 7) {
          return vk.toast("分类名称不能超过7个字符");
        }
        uni.vk
          .callFunction({
            url: "client/classification/kh/editClassification",
            data: {
              _id: activeTag.value._id,
              name: res.content,
              type: activeTag.value.type,
            },
          })
          .then((res) => {
            vk.toast(res.msg);
            getClassification();
          });
      }
    },
    activeTag.value.name
  );
};
const del = (item) => {
  if (!activeTag.value._id || activeTag.value.type !== item.type)
    return vk.toast(`请先选择要删除的${item.typeName}分类`);
  vk.confirm(
    `确定要删除${item.typeName}分类【${activeTag.value.name}】吗？`,
    (res) => {
      if (res.confirm) {
        console.log(res, "删除");
        uni.vk
          .callFunction({
            url: "client/classification/kh/deleteClassification",
            data: {
              _id: activeTag.value._id,
            },
          })
          .then((res) => {
            vk.toast(res.msg);
            getClassification();
          });
      }
    }
  );
};

const clearTap = (item) => {
  console.log(item, activeTag.value);
  if (item.type !== activeTag.value.type) activeTag.value = {};
};

getClassification();
</script>

<style lang="scss" scoped>
.classification {
  padding: 10px;
  background-color: $u-bg-color;
  position: relative;
  height: calc(100vh - var(--window-top));
  .u-collapse-item {
    background: #fff;
  }

  .cardHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .cardBody {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .cardFoot {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    .u-icon,
    :deep(.u-icon__label) {
      color: $u-type-primary !important;
    }
  }
}
</style>
